<template>
  <el-dialog
    class="goods_dialog"
    width="1000px"
    title="添加商品"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
  >
    <div>
      <el-form
        :inline="true"
        :model="searchForm"
      >
        <el-form-item>
          <el-input
            v-model="searchForm.goods_name"
            placeholder="请输入商品ID或名称"
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="searchForm.cate_id"
            clearable
            placeholder="请选择商品品类"
          >
            <el-option
              v-for="item in categoryList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="searchForm.shop_name"
            placeholder="请输入供应商"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="search()"
          >查询</el-button>
          <el-button
            size="small"
            @click="reset()"
          >重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          label="商品信息"
          width="350"
        >
          <template slot-scope="scope">
            <div class="flex">
              <el-image
                style="width: 60px; height: 60px"
                :src="scope.row.imgurl?$globalObj.imgBaseUrl+scope.row.imgurl:''"
              >
                <div
                  slot="error"
                  class="image-slot"
                >
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
              <div
                class="flex-1 text-left"
                style="padding-left:15px;"
              >
                <p class="color-999">{{ scope.row.goods_id }}</p>
                <p class="color-666">{{ scope.row.title }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="pact_type"
          label="租赁方式"
          align="center"
        /> -->
        <el-table-column
          prop="cate_name"
          label="品类"
          align="center"
        />
        <el-table-column
          prop="shopname"
          label="供应商"
          align="center"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.is_choose == 2"
              type="primary"
              size="mini"
              @click="add(scope.row.goods_id)"
            >参与活动</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div
        class="text-right"
        style="margin-top:15px;"
      >
        <el-pagination
          :current-page.sync="searchForm.page"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
          prev-text="上一页"
          next-text="下一页"
          background
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        type="primary"
        size="small"
        @click="dialogVisible = false"
      >关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getCategoryList } from '@/api/recommend'
import { addList, chooseGoods } from '@/api/xcx'
export default {
  props: ['cateId'],
  data() {
    return {
      dialogVisible: false,
      searchForm: {
        page: 1,
        goods_name: '',
        cate_id: '',
        shop_name: ''
      },
      categoryList: [],
      total: 0,
      tableData: [],
      pageSize: 5
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getSelectList()
        this.$nextTick(() => {
          this.getList()
        })
      } else {
        // 重置
        this.searchForm = {
          page: 1,
          goods_name: '',
          cate_id: '',
          shop_name: ''
        }
      }
    }
  },
  methods: {
    add(id) {
      addList({
        goodsId: id,
        listCateId: this.cateId
      }).then(res => {
        this.getList()
        this.$emit('getList')
      })
    },
    getList() {
      chooseGoods({ pageSize: this.pageSize, list_cate_id: this.cateId, ...this.searchForm }).then(res => {
        this.tableData = res.data
        this.total = res.total
      })
    },
    // 页码切换
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.getList()
    },
    search() {
      this.searchForm.page = 1
      this.getList()
    },
    reset() {
      this.searchForm = {
        page: 1,
        goods_name: '',
        cate_id: '',
        shop_name: ''
      }
      this.getList()
    },
    getSelectList() {
      getCategoryList().then(res => {
        this.categoryList = res || []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form .el-input,
.el-select {
  width: 180px;
}
</style>
